"use client";

import { TrendingDown, TrendingUp } from "lucide-react";
import {
  Bar,
  CartesianGrid,
  ComposedChart,
  Line,
  XAxis,
  YAxis,
} from "recharts";

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import { ChartProps } from "./flights-chart.interface";
const chartConfig = {
  lineData: {
    label: "航班量趋势",
    color: "hsl(var(--chart-1))",
  },
  barData: {
    label: "月度总航班量",
    color: "hsl(var(--chart-2))",
  },
} satisfies ChartConfig;

const FlightChart = ({
  trending,
  data,
  isIncrease,
  isTotal,
}: ChartProps) => {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-gray-600">
          {isTotal ? "航班总架次" : "本站出港千次率"}
        </CardTitle>
        <CardDescription>
          截至：{new Date().toISOString().split("T")[0]}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer className="min-h-10" config={chartConfig}>
          <ComposedChart accessibilityLayer data={data}>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              tickMargin={10}
              axisLine={false}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <YAxis
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickCount={5}
              domain={isTotal ? [0, 1000] : [0, 'auto']}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <Line
              dataKey="lineData"
              type="monotone"
              stroke="var(--color-lineData)"
            />
            <Bar dataKey="barData" fill="var(--color-barData)" radius={6} />
          </ComposedChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col items-start gap-2 text-sm">
        <div className="flex gap-2 font-medium leading-none text-gray-600">
          {isIncrease ? (
            <>
              较上月上升<span className="text-red-500">{trending}</span>
              <TrendingUp className="h-4 w-4 text-red-500" />
            </>
          ) : (
            <>
              较上月下降<span className="text-green-500">{trending}</span>
              <TrendingDown className="h-4 w-4 text-green-500" />
            </>
          )}
        </div>
      </CardFooter>
    </Card>
  );
};

export default FlightChart;
